<template>
  <div>
    <v-btn color="primary">新增品牌</v-btn>
    <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
    >
      <template v-slot:items="props">
        <tr>
          <td class="text-xs-center">{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center">{{ props.item.image }}</td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="text-xs-center">
            <v-btn flat icon color="success" small>
              <v-icon small>edit</v-icon>
            </v-btn>
            <v-btn flat icon color="warning" small  >
              <v-icon small>delete</v-icon>
            </v-btn>
          </td>
        </tr>
      </template>
    </v-data-table>
  </div>
</template>

<script>
  export default {
    name: "MyBrand",
    data() {
      return {
        totalBrands: 12, // 总的品牌的数量
        brands: [], // 当前页的品牌集合
        loading: true,
        pagination: {},
        headers: [
          {text: '品牌id', align: 'center', value: 'id'},
          {text: '品牌名称', align: 'center', sortable: false, value: 'name'},
          {text: '品牌LOGO', align: 'center', sortable: false, value: 'image'},
          {text: '首字母', align: 'center', value: 'letter'},
          {text: '操作', align: 'center', value: 'letter'},
        ]
      }
    },
    mounted() {
      this.getDataFromServer();
    },
    watch:{
      pagination:{
        deep: true,
        handler(){
          this.getDataFromServer();
        }
      }
    },
    methods: {
      getDataFromServer() {
        this.brands = [
          {"id": 2032, "name": "OPPO", "image": "1.jpg", "letter": "O"},
          {"id": 2033, "name": "飞利浦", "image": "2.jpg", "letter": "F"},
          {"id": 2034, "name": "华为（HUAWEI）", "image": "3.jpg", "letter": "H"},
          {"id": 2036, "name": "酷派（Coolpad）", "image": "4.jpg", "letter": "K"},
          {"id": 2037, "name": "魅族（MEIZU）", "image": "5.jpg", "letter": "M"}
        ]
        this.$http.get("brand/page", {
            params: {
              page: this.pagination.page,
              rows: this.pagination.rowsPerPage,
              sortBy: this.pagination.sortBy,
              desc: this.pagination.descending
            }
          })
          .then(resp => console.log(resp))
          .catch(error => console.log(error))
      }
    }
  }
</script>

<style scoped>

</style>